<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title></title>
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
    <![endif]-->

    <style>
        .head-one {
            padding: 20px;
            box-sizing: inherit;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transition-delay: 0s;
        }

        .head-two {
            margin-top: 20px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
        }

        .head-three {
            margin-top: 20px;
            box-sizing: inherit;
            display: block;
            border: 1px solid #ebeef5;
        }

        .table-main {
            text-align: center;
            line-height: 100%;
        }

        .head-three table th {
            border: 1px solid grey;
        }

        .el-card__body > .head-one1 {
            font-size: 16px;
        }

        .el-card__body {
            margin-bottom: 15px;
            padding: 20px 20px 10px 20px;
            background-color: white;
            font-size: 14px;
        }

        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }

        .el-table__header {
            table-layout: fixed;
            border-collapse: separate;
        }

        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }

        .cell {
            box-sizing: border-box;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
            padding-top: 0.25em;
        }
        .pagination > li > form, .pagination > li > select, .pagination > li > input {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .pagination > li > input {
            outline: none;
            width: 40px;
            text-align: center;
        }
        #status{
            outline: none;
            padding: 3px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: black;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        #my-div{
            margin-top: 20px;
        }
        #number{
            outline: none;
        }
    </style>
</head>

<body class="sticky-header">


<%@include file="../inc/left.jsp" %>


<!-- main content start-->
<div class="main-content">

    <%@include file="../inc/header.jsp" %>


    <!--body wrapper start-->
    <div class="head-three ">
        <table class="table table-bordered table-main" style="background-color: white">
            <thead>
            <tr>

                <th style="text-align: center">名称</th>
                <th style="text-align: center">优惠券类型</th>
                <th style="text-align: center">可使用商品</th>
                <th style="text-align: center">使用门槛</th>
                <th style="text-align: center">面值</th>
                <th style="text-align: center">状态</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>${coupon.name}</td>
                <td>${coupon.type}</td>
                <td>${coupon.useType}</td>
                <td>${coupon.minPoint}</td>
                <td>${coupon.amount}</td>
                <td>${Time>coupon.endTime?"已过期":"未过期"}</td>
            </tr>
            <tr>
                <td>有效期</td>
                <td>总发行量</td>
                <td>已领取</td>
                <td>待领取</td>
                <td>已使用</td>
                <td>未使用</td>
            </tr>
            <tr>
                <td><fmt:formatDate value="${coupon.startTime}"/>至<fmt:formatDate value="${coupon.endTime}"/></td>
                <td>${coupon.publishCount}</td>
                <td>${coupon.receiveCount}</td>
                <td>${coupon.publishCount-coupon.receiveCount}</td>
                <td>${coupon.useCount}</td>
                <td>${coupon.publishCount-coupon.useCount}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div data-v-2ef16592="" class="el-card filter-container is-never-shadow "><!---->
        <div class="el-card__body">
            <div data-v-2ef16592=""><i class="fa fa-search" aria-hidden="true"></i></i> <span
                    data-v-2ef16592="">筛选搜索</span>
                <button data-v-2ef16592="" onclick="select()" type="button" class="btn btn-info"
                        style="float: right;"><!----><!----><span>
        查询搜索
      </span></button>
                <a href="${pageContext.request.contextPath}/sell/select_restart">
                    <button data-v-2ef16592="" type="button" class="btn btn-default"
                            style="float: right; margin-right: 15px;"><!----><!----><span>
        重置
      </span></button>
                </a>

            </div>
            <div data-v-2ef16592="" style="margin-top: 15px;" class="head-one">
                <form data-v-2ef16592="" class="el-form el-form--inline">
                    <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4">

                        <div class="el-form-item__content">
                            <div data-v-2ef16592="" class="el-select input-width el-select--small"><!---->
                                <div  ><!---->
                                    <label
                                            class="el-form-item__label"
                                            style="width: 100px;">使用状态：
                                    </label>
                                    <select id="status"  placeholder="全部" style="width: 150px"
                                            class="pagination">
                                        <option value="">全部</option>
                                        <option value="0">未使用</option>
                                        <option value="1">已使用</option>
                                        <option value="2">已过期</option>

                                    </select>
                                </div>
                            </div><!----></div>
                    </div>
                    <div class="row" >
                        <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4" id="my-div">

                            <div class="el-form-item__content">
                                <div data-v-2ef16592="" class="input-width el-input el-input--small">
                                    <!---->
                                    <label
                                            class="el-form-item__label"
                                            style="width: 100px;">订单编号：
                                    </label>
                                    <input
                                            id="number" type="text" autocomplete="off" placeholder="订单编号"
                                            class="el-input__inner">
                                    <!---->
                                    <!----><!----></div><!----></div>
                        </div>

                    </div>
                </form>
            </div>


            <div class="head-three">
                <table class="table table-bordered table-main">
                    <thead>
                    <tr>

                        <th style="text-align: center">优惠码</th>
                        <th style="text-align: center">领取会员</th>
                        <th style="text-align: center">领取方式</th>
                        <th style="text-align: center">领取时间</th>
                        <th style="text-align: center">当前状态</th>
                        <th style="text-align: center">使用时间</th>
                        <th style="text-align: center">订单编号</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    <c:forEach items="${histories.list}" var="var">
                        <tr>
                            <td>${var.couponCode}</td>
                            <td>${var.memberNickname}</td>
                            <td>
                                <c:if test="${var.getType==0}">
                                    后台赠送
                                </c:if>
                                <c:if test="${var.getType==1}">
                                    主动获取
                                </c:if>
                            </td>
                            <td><fmt:formatDate value="${var.createTime}"/></td>
                            <td>
                                <c:if test="${var.useStatus==0}">
                                    未使用
                                </c:if>
                                <c:if test="${var.useStatus==1}">
                                    已使用
                                </c:if>
                                <c:if test="${var.useStatus==2}">
                                    已过期
                                </c:if>
                            </td>
                            <td><fmt:formatDate value="${var.useTime}"/></td>
                            <td>${var.orderSn}</td>

                        </tr>
                    </c:forEach>


                    </tbody>
                </table>
            </div>
            <div>

                <form action="coupon_select?page">
                    <ul class="pagination" id="myul">
                        <li class="pagination">
                            <span>共${histories.total}条</span>
                        </li>
                        <li class="pagination">
                            <select id="my-select">
                                <option>5页/条</option>
                                <option>10页/条</option>
                                <option>20页/条</option>
                            </select>
                        </li>
                        <c:if test="${histories.pageNum>1}">
                            <li><a href="coupon_select?page=${histories.pageNum-1}"><<</a></li>
                        </c:if>

                        <c:forEach begin="1" end="${histories.pages}" var="i">
                            <li class="${histories.pageNum==i?"active":""}"><a href="coupon_select?page=${i}">${i}</a>
                            </li>
                        </c:forEach>
                        <c:if test="${histories.pageNum<histories.pages}">
                            <li><a href="coupon_select?page=${histories.pageNum+1}">>></a></li>
                        </c:if>
                        <li class="pagination">
                            <span>前往</span>
                        </li>
                        <li class="pagination">
                            <input name="page">
                        </li>
                        <li class="pagination">
                            <span>页</span>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
    <!-- End Wrapper-->


    <%@include file="../inc/footer.jsp" %>


</div>
<!--End main content -->
<script>
    let all = document.getElementById(`input-all`)
    let ches = document.querySelector("tbody").getElementsByTagName("input")
    all.onclick = function () {
        for (let i = 0; i < ches.length; i++) {
            ches[i].checked = this.checked
        }
    }
    for (let i = 0; i < ches.length; i++) {
        ches[i].onclick = function () {
            all.checked = this.checked
        }
    }


    function select(page) {
        let status = $("#status").val();
        let number = $("#number").val();
        $.ajax({
            url: '${pageContext.request.contextPath}/sell/queryById',
            type: 'post',
            data: {page: page, useStatus: status, orderSn: number},
            success: function (result) {
                var rows = result.list;
                var html = '';
                for (var i = 0; i < rows.length; i++) {
                    html += '<tr>';
                    var couponCode = rows[i].couponCode;
                    html += '<td>' + couponCode + '</td>';
                    var memberNickname = rows[i].memberNickname;
                    html += '<td>' + memberNickname + '</td>';
                    var getType = rows[i].getType;
                    if (getType == 0) {
                        html += '<td>' + '后台赠送' + '</td>';
                    }
                    if (getType == 1) {
                        html += '<td>' + '主动获取' + '</td>';
                    }
                    html += '<td>' + dateFormat(rows[i].createTime) + '</td>';
                    var useStatus = rows[i].useStatus;
                    if (useStatus == 0) {
                        html += '<td>' + '未使用' + '</td>';
                    }
                    if (useStatus == 1) {
                        html += '<td>' + '已使用' + '</td>';
                    }
                    if (useStatus == 2) {
                        html += '<td>' + '已过期' + '</td>';
                    }

                    html += '<td>' + dateFormat(rows[i].useTime) + '</td>';
                    var orderSn = rows[i].orderSn;
                    html += '<td>' + orderSn + '</td>';
                    html += '</tr>';
                }

                $("#tbody").html(html);
                let html2 = '';
                let nowPage = result.pageNum;
                let endPage = result.pages;
                if (nowPage == 1) {
                    html2 += '';
                } else {
                    html2 += '<li><a href="#" onclick="select(' + result.prePage + ')"><<</a></li>'
                }
                for (let i = 1; i <= result.pages; i++) {
                    if (nowPage == i) {
                        html2 += '<li class="active"><a>' + i + '</a></li>'
                    } else {
                        html2 += '<li><a href="#" onclick="select(' + i + ')">' + i + '</a></li>'
                    }
                }
                if (nowPage == endPage) {
                    html2 += '';
                } else {
                    html2 += '<li><a href="#" onclick="select(' + result.nextPage + ')">>></a></li>'
                }
                $("#myul").html(html2);

            }
        })
    }

    // 日期格式化
    function dateFormat(date) {
        let year = new Date(date).getFullYear();
        let month = new Date(date).getMonth() + 1;
        if (month < 10) {
            month = "0" + month;
        }
        let day = new Date(date).getDate();
        if (day < 10) {
            day = "0" + day;
        }
        return year + "-" + month + "-" + day;
    }
</script>

<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

</body>

</html>

